<template>
    <div class="wrapper">
        <mt-header fixed :title="$route.query.name" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
        </mt-header>
        <loadmore :items='items'></loadmore>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import loadmore from "@/components/Loadmore2/index"
import { setCookie,getCookie } from '@/utils/auth'
export default {
    data: function () {
        return {
            scrollTop : 0,
            items : [],
        }
    },
    components:{
        loadmore
    },
    mounted(){
        document.getElementById("loadmore").addEventListener('scroll', this.handleScroll);
    },
    activated(){
        if( getCookie(this.$route.query.classId) ){
            this.scrollTop = getCookie(this.$route.query.classId)
        }else{
            this.scrollTop = 0;
        }
        if(this.scrollTop > 0){
            document.getElementById("loadmore").scrollTop = this.scrollTop;
            document.getElementById("loadmore").addEventListener('scroll', this.handleScroll);
        }
    },
    methods: {
        handleScroll () {
            this.scrollTop = document.getElementById("loadmore").scrollTop;
        }
    },
    beforeRouteLeave(to,from,next){
        if( from.name == 'orderNews' && to.name == 'order'){
            // 从列表页到分类页
            this.scrollTop = 0;
        }
        setCookie(this.$route.query.classId,this.scrollTop)  // 浏览器关闭则清除缓存
        next()
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .banner{
        position: relative;
        height: 100px;
        overflow: hidden;
        .inner{
            position: absolute;
            top: 0px;
            width:100%;
            .title {
                width: 100%;
                height:100px;
                line-height:100px;
                text-align: center;
                font-size:18px;
                color: rgba(255,255,255,1);
            }
        }
    }

}
</style>
